/* 获取body */
const body = document.body;
/* 获取所有slide元素 */
const slides = document.querySelectorAll(".slide");
/* 获取left元素 */
const leftBtn = document.getElementById("left");
/* 获取right元素 */
const rightBtn = document.getElementById("right");
/* 初始值 */
let activeSlide = 0;

const setBgToBody = () => {
  /* 将body的背景图片设置为slides的第activeSlide个元素 */
  body.style.backgroundImage = slides[activeSlide].style.backgroundImage;
};
const setActiveSlide = () => {
  /* 循环slides元素*/
  slides.forEach((slide) => {
    /* 删除 slides元素上的active类样式*/
    return slide.classList.remove("active");
  });
  /* slides第activeSlide个元素上添加active */
  slides[activeSlide].classList.add("active");
};

/* 右边按钮的点击事件 */
rightBtn.addEventListener("click", () => {
  /* 点击一次+1 */
  activeSlide++;
  /* 当点击的次数达到slides元素的最后一个 */
  if (activeSlide > slides.length - 1) {
    /* 在次从0开始 */
    activeSlide = 0;
  }
  setBgToBody();
  setActiveSlide();
});
/* 左边按钮的点击事件 */
leftBtn.addEventListener("click", () => {
  /* 点击一次-1 */
  activeSlide--;
  /* 当点击的次数比slides元素的第一个还低的时候  */
  if (activeSlide < 0) {
    /* 将从slides元素的最后一个开始 */
    activeSlide = slides.length - 1;
  }
  /*  */
  setBgToBody();
  setActiveSlide();
});
